<!--
  Generated template for the GoodsDetailPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>
  <ion-navbar>
    <ion-title>商 品 详 情</ion-title>
    <ion-buttons end>
      <button ion-button icon-only (click)="presentPopover($event)">
        <ion-icon name="md-share"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>


<ion-content>
  <ng-container *ngIf="goodsDetail">
    <div class="pic_list">
      <ion-slides [loop]="true" [autoplay]="3000" pager>
        <ion-slide *ngFor="let item of goodsDetail.img_list">
          <image [src]="item.pic_cover_mid" alt=""></image>
        </ion-slide>
      </ion-slides>
    </div>
    <div class="goods_intro">
      <p class="name">{{goodsDetail.goods_name}}</p>
      <p class="price">
        <span>¥ {{goodsDetail.promotion_price}}</span>
        <span>¥ {{goodsDetail.market_price}}</span>
        <span>已售 ：{{goodsDetail.sales}}</span>
      </p>
      <p class="star">
        <star [stars]="goodsDetail.star/goodsDetail.evaluates"></star>
        <span>点击： {{goodsDetail.clicks}} </span>
        <span>收藏： {{goodsDetail.collects}} </span>
      </p>
      <p class="note">
        <span>闪电发货</span>
        <span>限时减价</span>
        <span>正品保证</span>
        <span>支持售后</span>
      </p>
      <p class="note" *ngIf="goodsDetail?.baoyou_name">
        <span class="dj">{{goodsDetail.baoyou_name}}</span>

      </p>
    </div>
    <div class="detail_nav">
      <span class="active" (click)="hideDetail = false">商 品</span>
      <span (click)="changeIndex(2)">详 情</span>
      <span (click)="changeIndex(3)">评 价({{evaluatesCount.evaluate_count}})</span>
    </div>
    <!-- 优惠券 -->
    <!-- <div class="coupon_list" *ngIf="couponList.length>0">
    <ion-scroll scrollX="true" style="height:90px;">
      <ul class=" clear">
        <li *ngFor="let coupon of couponList" (click)="bindCoupon(coupon)">
          <div>
            <div class="price">
              ¥
              <span>{{coupon.money}}</span>
              <p>商品优惠券</p>
            </div>
            <div class="get">
              <span *ngIf="coupon.at_least != '0.00'">满{{coupon.at_least}}使用</span>
              <span *ngIf="coupon.at_least == '0.00'">无门槛使用</span>
              <p>立即领取</p>
            </div>
          </div>
        </li>
      </ul>
    </ion-scroll>
  </div> -->
    <div class="goods" [class.show]="navIndex == 1">
      <div class="rule" *ngIf="goodsDetail.goods_attribute_id==1" tappable (click)="choose($event)">
        镜片规格：
        <ng-container>
          <choose-model id='choose' [selectList]='roleList' (selectResult)="getRoleResult($event)" [defaultValue]="selectValue"></choose-model>
          <ion-icon class="r" name="ios-arrow-forward-outline"></ion-icon>
        </ng-container>
      </div>
      <div class="rule_box" *ngIf="specList?.length>0">
        选择规格：
        <div class="spec_item" *ngFor="let item of specList;let i = index">
          <p>{{item.spec_name}}</p>
          <div class="sitem_list">
            <label class="sitem_item" *ngFor="let ele of item.value;" [class.selected]="selectSku[i] == ele.spec_id+':'+ele.spec_value_id">
              {{ele.spec_value_name }}
              <input type="radio" [value]="ele.spec_id+':'+ele.spec_value_id" [(ngModel)]="selectSku[i]" (ngModelChange)="calcSku()">
              <img src="assets/imgs/icon_ok.png" alt="">
            </label>
          </div>
        </div>
      </div>
      <div class="rule">
        购买数量：
        <number-input [min]='1' [max]='9999' [(numVal)]='numVals' (numValChange)="log($event)"></number-input>
      </div>
    </div>




  </ng-container>

</ion-content>
<ion-footer>
  <div class="favorite" tappable (click)="fav()">
    <ion-icon *ngIf="isMemberFavGoods==0" name="ios-heart-outline"></ion-icon>
    <ion-icon *ngIf="isMemberFavGoods!=0" class="fav" name="ios-heart"></ion-icon>
    <p>收藏</p>
  </div>
  <div class="service">
    <!-- <a target="_blank" [href]="'tel:'+appInfo?.web_phone">
      <ion-icon name="md-call"></ion-icon>
      <p>电话</p>
    </a> -->
    <ion-icon name="ios-chatbubbles" (click)="message()"></ion-icon>
    <p>客服</p>
  </div>
  <div class="cart" tappable (click)="goToCart()">
    <ion-icon name="md-cart"></ion-icon>
    <p>购物车</p>
    <ion-badge color="danger" *ngIf="cartInfo?.carcount>0">{{cartInfo.num}}</ion-badge>
  </div>
  <div class="buy_now" tappable (click)="hideDetail=false;tag='buy_now'">
    立即购买
  </div>
  <div class="add_cart" *ngIf="goodsDetail?.goods_type!=0" tappable (click)="hideDetail=false;tag='cart'">
    加入购物车
  </div>
</ion-footer>
<coustom-action [(isHide)]="hideDetail" title="选择规格:">
  <div class="coustom_intro">
    <image class="image" [src]="goodsDetail?.img_list[0]?.pic_cover_mid" alt=""></image>
    <p>
      {{goodsDetail?.goods_name}}
    </p>
  </div>
  <div class="goods" [class.show]="navIndex == 1">
    <div class="rule" *ngIf="goodsDetail?.goods_attribute_id==1" tappable (click)="choose($event)">
      镜片规格：
      <choose-model id='choose' [selectList]='roleList' (selectResult)="getRoleResult($event)" [defaultValue]="selectValue"></choose-model>
      <ion-icon class="r" name="ios-arrow-forward-outline"></ion-icon>
    </div>
    <div class="rule_box" *ngIf="specList?.length>0">
      选择规格：
      <div class="spec_item" *ngFor="let item of specList;let i = index">
        <p>{{item.spec_name}}</p>
        <div class="sitem_list">
          <label class="sitem_item" *ngFor="let ele of item?.value;" [class.selected]="selectSku[i] == ele?.spec_id+':'+ele?.spec_value_id">
            {{ele.spec_value_name }}
            <input type="radio" [value]="ele?.spec_id+':'+ele?.spec_value_id" [(ngModel)]="selectSku[i]" (ngModelChange)="calcSku()">
          </label>
        </div>
      </div>
    </div>
    <div class="rule">
      购买数量：
      <number-input [min]='1' [max]='9999' [(numVal)]='numVals' (numValChange)="log($event)"></number-input>
    </div>
  </div>
  <button ion-button full tappable (click)="actionConfirm()">确 定</button>
</coustom-action>
